<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div class="body" ref="fff"></div>
    <!-- <h1 v-for="item in Point" :key="item"> {{item.name}} </h1> -->
  </div>
</template>

<script>
// 导入echarts
import * as echarts from 'echarts'
import { getPoint } from '@/api/home'

export default {
  // props: {
  //   Point: {
  //     type: Array
  //   }
  // },
  data () {
    return {
      Point: []
    }
  },
  async created () {
    const pp = await getPoint()
    this.Point = pp
    // console.log(pp)
    await this.myEcharts()
  },
  methods: {
    myEcharts () {
      const myChart = echarts.init(this.$refs.fff)
      // 配置图表
      const option = {
        legend: {
          // show: 'false',
          orient: 'vertical',
          top: 'center',
          left: '100%',
          data: [this.Point[0].name, this.Point[1].name, this.Point[2].name, this.Point[3].name, this.Point[4].name],
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '70%'],
            center: ['40%', '50%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                formatter: `{b}
                {d}%`
              }
            },
            labelLine: {
              length: 10,
              length2: 20
            },
            data: [
              {
                value: this.Point[0].value,
                name: this.Point[0].name,
                itemStyle: {
                  color: 'rgba(50,123,250,0.7)'
                }
              },
              {
                value: this.Point[1].value,
                name: this.Point[1].name,
                itemStyle: {
                  color: 'rgba(244,201,7,0.7)'
                }
              },
              {
                value: this.Point[2].value,
                name: this.Point[2].name,
                itemStyle: {
                  color: 'rgba(23,216,161,0.7)'
                }
              },
              {
                value: this.Point[3].value,
                name: this.Point[3].name,
                itemStyle: {
                  color: 'rgba(122,60,235,0.7)'
                }
              },
              {
                value: this.Point[4].value,
                name: this.Point[4].name,
                itemStyle: {
                  color: 'rgba(15,197,243,0.7)'
                }
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  }

}
</script>

<style>
.body {
    width: 420px;
    height: 278px;
  }
</style>
